@import "./default.scss";

// 侧边工具组
.sidebar-tool-wrap {
  position: fixed;
  right: 0;
  bottom: 5rem;
  z-index: 1000;

  .sg-tool-item {
    background-color: white;
    font-size: 0.5rem;
    text-align: center;
    i {
      font-size: 1.5rem;
    }

    &.to-top {
      padding: 0.5rem;
    }
  }
}
.main-center-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 100%;

  /* ------- 公共样式 ------- */
  /* #region  */

  // 各种分类的标题
  .cate-header {
    font-weight: 100;
    color: black;
    font-size: 1.5rem;
    margin: 1rem 0;
  }

  // 长条推荐(?广告)
  .banner-ad-wrap {
    margin: 1rem 0;
    @include img-item(100%);
  }

  /* #endregion */
  /* ------- end  ------- */

  // 轮播图
  .swiper-wrap {
    position: relative;
    user-select: none;

    height: 28.75rem;

    .swiper-wrap-left {
      position: absolute;
      box-sizing: border-box;

      display: flex;
      flex-direction: column;
      justify-content: space-evenly;

      color: aliceblue;
      background-color: rgba(0, 0, 0, 0.3);

      width: 15.1875rem;
      height: 100%;
      padding: 1rem 0;

      z-index: 777;

      .sg-swiper-collapse-item {
        width: calc(100% - 2rem);
        cursor: pointer;

        padding: 0.5rem 1rem;

        .item-info {
          display: flex;
          justify-content: space-between;
        }

        .item-sider-collapse-board {
          position: absolute;
          left: 100%;
          top: 0;
          flex-direction: row;
          flex-direction: column;
          flex-wrap: wrap;
          justify-content: space-evenly;
          display: none;
          padding: 1rem;

          width: calc(76.625rem - 15.1875rem);
          height: calc(100% - 2rem);
          background-color: aliceblue;
          color: black;

          .sg-goods-list-item {
            display: flex;
            align-items: center;

            padding: 0.5rem;

            .item-img {
              @include img-item(3rem);
            }
          }
        }

        &:hover {
          background-color: $orange-color;

          .item-sider-collapse-board {
            display: flex;
          }
        }
      }
    }

    .swiper-wrap-right {
      position: absolute;
      width: 100%;
      height: 100%;

      .swiper {
        width: 100%;
        height: 100%;
        .sg-swiper-img-item {
          transition: opacity 0.5s;

          object-fit: cover;
          width: 100%;
          height: 100%;
          position: absolute;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .circle-wrap {
        position: absolute;
        display: flex;
        align-items: center;
        right: 1.5rem;
        bottom: 1.5rem;

        .sg-cirlce {
          width: 0.5rem;
          height: 0.5rem;
          border-radius: 50%;
          background-color: rgba(113, 113, 113, 0.666);
          border: 2px solid rgba(113, 113, 113, 0.666);
          margin: 0 0.25rem;

          &.active {
            background-color: rgba(255, 255, 255, 0.7);
          }
        }
      }

      .change-swiper-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);

        cursor: pointer;

        color: rgba(255, 255, 255, 0.7);
        font-size: 3rem;
        padding: 0.5rem;

        &.prev {
          left: 15.1875rem;
        }

        &.next {
          right: 0;
        }
      }
    }
  }

  // 分类和推荐
  .cate-and-recommend-wrap {
    width: 76.625rem;
    min-width: 76.625rem;

    display: flex;
    justify-content: space-between;
    margin: 1rem 0;

    .cate-wrap,
    .sg-recommend-wrap {
      width: 25%;
    }

    .cate-wrap {
      display: flex;
      flex-wrap: wrap;
      width: calc(15.1875rem);

      .sg-cate-item {
        width: calc(33% - 2rem);
        flex: 1 0 calc(33% - 2rem);

        padding: 1rem;

        display: flex;
        flex-direction: column;
        align-items: center;

        background-color: #5f5750;
        color: white;
        font-size: 0.7rem;

        i {
          font-size: 1.5rem;
          margin-bottom: 0.5rem;
        }
      }

      .sg-recommend-wrap {
        background-color: #5f5750;
      }
    }

    .sg-recommend-wrap {
      @include img-item(25%);
      @include element-box-shadow(0.3s);
    }
  }

  // 小米闪购
  .time-limit-wrap {
    height: 21.25rem;
    .time-limit-list {
      display: flex;
      justify-content: space-evenly;
      height: 100%;

      // 样式
      .list-item {
        background-color: #f1eded;
        height: 100%;
        flex: 1 0 calc(20% - 1rem);
        margin-right: 1rem;

        &:last-child {
          margin-right: 0;
        }

        &.empty {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;

          i {
            font-size: 3rem;
            color: #e53934;
            margin-bottom: 2rem;
          }
        }

        $border-arr: (
          "red": #e53935,
          "yellow": #ffac13,
          "green": #83c44e,
          "blue": #2196f3,
          "pink": rgb(255, 73, 209),
        );

        @each $name, $color in $border-arr {
          &.#{$name} {
            border-top: 1px solid $color;
          }
        }
      }
      // 倒计时
      .list-item {
        .time-wrap {
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 2rem;

          .hour,
          .minute,
          .second {
            display: flex;

            .tens-place,
            .ones-place {
              width: 2rem;
              height: 2rem;
              font-size: 2rem;
              text-align: center;
              color: #e53934;
            }
          }
        }
      }
    }
  }

  // 详细分类
  .has-tab-field {
    display: flex;
    justify-content: space-between;

    .tab-field {
      display: flex;
      user-select: none;

      .sg-tab-item {
        margin: 0 0.5rem;
        cursor: pointer;

        font-size: 1rem;

        &.active {
          border-bottom: 1px solid rgb(255, 72, 0);
          color: rgb(255, 72, 0);
        }
      }
    }
  }
  .sg-main-category-wrap {
    height: 40rem;
    .main-category-wrap {
      width: 100%;
      height: 100%;
      display: flex;
    }
  }

  // 单个商品卡片
  .sg-cate-goods-item {
    &.col {
      flex: 1 0 20%;
      width: 20%;
      max-width: 20%;
      margin-right: 1rem;
      .col-item {
        @include img-item(100%);
        @include element-box-shadow(0.3s);
        height: calc(50% - 0.5rem);
        margin-bottom: 0.75rem;
      }
    }

    &.row {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .row-item {
        position: relative;
        flex: 1 0 calc(25% - 1.5rem);

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;

        padding: 0.5rem;
        margin-right: 0.5rem;
        margin-bottom: 0.75rem;

        max-width: calc(25% - 1.5rem);
        height: calc(50% - 1.5rem);
        background-color: white;

        @include element-box-shadow(0.3s);

        .new-tag {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          padding: 0.25rem 1rem;
          font-weight: 800;
          color: white;
          background-color: #83c44e;
        }

        .item-img {
          @include img-item(10rem);
        }

        .item-info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;

          .name {
            margin-bottom: 0.5rem;
          }

          .desc {
            margin-bottom: 0.5rem;
            font-size: 0.75rem;
            color: #ccc;
          }
          .price {
            .num {
              color: #ff3b35;
            }
            .origin-num {
              color: #ccc;
              text-decoration: line-through;
            }
          }
        }
      }
    }
  }

  // 为你推荐
  .main-recommend-wrap {
    .tab-field {
      .sg-tab-item {
        margin: 0;
        text-align: center;
        &.recommend-arrow {
          padding: 0.25rem 1rem;
          line-height: 1.5;
          font-weight: 600;

          border: 1px solid #ccc;

          &.disable {
            color: #ccc;
          }
        }
      }
    }

    .recommend-list {
      overflow: hidden;
      .sg-cate-goods-item {
        transition: transform 0.3s;
        width: 229.875rem;

        // transform: translateX(-76.625rem);
        .row-item {
          font-size: 0.75rem;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;

          width: 15.325rem;
          flex: 1 0 calc(15.325rem - 1.5rem);
          .item-info {
            margin-top: 0.5rem;
          }
        }
      }
    }
  }

  // 热评产品
  .main-comment-wrap {
    .comment-list {
      .row-item {
        // height: 25.9375rem;
        padding: 0;
        justify-content: space-between;
        .item-img {
          width: 100%;
        }
        .item-info {
          height: 10rem;
          padding: 0.5rem;

          display: flex;
          justify-content: space-evenly;
          align-items: flex-start;
        }
      }
    }
  }

  // 内容
  .main-content-wrap {
    .content-list {
      .list-item {
        background-color: white;
      }
    }
  }
}

.swiper-wrap,
.cate-and-recommend-wrap,
.time-limit-wrap,
.cate-header,
.banner-ad-wrap,
.sg-main-category-wrap,
.main-recommend-wrap,
.main-comment-wrap,
.footer-wrap {
  width: 1226px;
  min-width: 1226px;
}

/* ------- 时间分隔符闪烁 ------- */
/* #region  */
.time-divide {
  opacity: 1;
  animation: time-divide-blink 1s infinite;
}
@keyframes time-divide-blink {
  50% {
    opacity: 0.3;
  }
}
/* #endregion */
/* ------- end  ------- */
